<template>
	<view class="bd">
		<u-sticky bgColor="#fff" offset-top="0">
			<view class="goO">
				<u-tabs :list="headList" :scrollable="false" lineWidth="30" :activeStyle="{color:'#d81e06'}"
					lineColor="red" @change="ok"></u-tabs>
			</view>
		</u-sticky>
		<view class="go2" v-for="item in list">
			<view class="go2-0">
				<view class="go2-1">
					<uni-icons type="home" size="23"></uni-icons>
					<text style="font-weight: bold; font-size: 20px;">{{item.store}}</text>
					<uni-icons type="forward" size="20"></uni-icons>
				</view>
				<view class="go2-2">
					{{item.deal}}
				</view>
			</view>
			<view class="go3" v-for="it in item.goodsList">
				<view class="go3-1">
					<image :src="it.goodsUrl"></image>
				</view>
				<view class="go3-2">
					<view class="go3-2-1">
						<text>{{it.title}}</text>
					</view>
					<view style="color:#c5c5c5;margin-top: 15%;">{{it.type}}</view>
					<view class="go3-3">{{it.deliveryTime}}</view>
				</view>
				<view class="go3-4">
					<view>￥{{it.price}}</view>
					<view style="color:#c5c5c5;">x{{it.number}}</view>
				</view>

			</view>
			<view class="go3-5">
				<view class="go3-6">共{{item.goodsList.length}}件商品合计:
					<text style="font-size: 18px;">￥{{item.zprice}}</text>
				</view>
			</view>
			<view class="go4" v-if="item.deal=='待付款'">
				<view class="go4-1">
					<uni-icons type="more-filled" size="30"></uni-icons>
				</view>

				<view class="go4-2">查看发票</view>
				<view class="go4-3">取消订单</view>
				<view class="go4-4">去支付</view>

			</view>
			<view class="go4" v-if="item.deal=='待发货'">
				<view class="go4-1">
					<uni-icons type="more-filled" size="30"></uni-icons>
				</view>

				<view class="go4-2">再次购买</view>
				<view class="go4-3">查看发票</view>
				<view class="go4-4">申请退款</view>

			</view>
			<view class="go4" v-if="item.deal=='待收货'">
				<view class="go4-1">
					<uni-icons type="more-filled" size="30"></uni-icons>
				</view>

				<view class="go4-2">延长收货</view>
				<view class="go4-3">查看物流</view>
				<view class="go4-4">确认收货</view>

			</view>
			<view class="go4" v-if="item.deal=='待评价'">
				<view class="go4-1">
					<uni-icons type="more-filled" size="30"></uni-icons>
				</view>

				<view class="go4-2">加入购物车</view>
				<view class="go4-3">查看物流</view>
				<view class="go4-4">评价</view>

			</view>
		</view>

	</view>
</template>

<script>
	import {
		apiOrders
	} from '../../api/mock'
	export default {
		data() {
			return {
				headList: [{
					name: '待付款'
				}, {
					name: '待发货'
				}, {
					name: '待收货'
				}, {
					name: '待评价'
				}],
				list: [],
				k: 0
			}
		},
		onLoad() {
			this.getOrders();
		},
		methods: {
			ok(e) {
				console.log(e.index);
				this.k = Number(e.index);
				console.log(this.headList[e.index].name);
				let o = this.headList[this.k].name;
				let s = 0;
				apiOrders(o).then((resp) => {
					console.log(resp);
					this.list = resp;
					this.list.forEach((item) => {
						let s = 0;
						for (let i = 0; i < item.goodsList.length; i++) {
							s += Number(item.goodsList[i].price);
						}
						item.zprice = s;

					})

				}).catch((e) => {
					console.log(e);
				})
			},
			getOrders() {
				let s = 0;
				apiOrders(this.headList[this.k].name).then((resp) => {
					console.log(resp);
					this.list = resp;
					this.list.forEach((item) => {
						let s = 0;
						for (let i = 0; i < item.goodsList.length; i++) {
							s += Number(item.goodsList[i].price);
						}
						item.zprice = s;
						console.log('总价');
						console.log(item.zprice);
					})

				}).catch((e) => {
					console.log(e);
				})
			}
		}
	}
</script>

<style>
	.bd {
		background-color: #f2f2f2;
		width: 100%;
		height: auto;
		padding-bottom: 3%;
	}

	.goO {
		width: 100%;
		background-color: white;
	}



	.go2 {
		width: 95%;
		background-color: white;
		margin: 0 auto;
		border-radius: 8px;
		padding-bottom: 3%;
		margin-top: 3%;
	}

	.go2-0 {
		display: flex;
		justify-content: space-between;
	}

	.go2-1 {
		padding-left: 2%;
		padding-top: 2%;
	}

	.go2-2 {
		font-size: 18px;
		color: orange;
		padding-top: 2%;
		padding-right: 3%;
	}

	.go3 {
		width: 100%;
		margin: 0 auto;
		display: flex;
	}

	.go3-1 {
		width: 30%;
		padding-left: 2%;
		padding-top: 2%;
	}

	.go3-1 image {
		width: 100%;
		height: 120px;
	}

	.go3-2 {
		width: 44%;
		padding-left: 2%;
	}

	.go3-2-1 {
		width: 100%;
		font-size: 15px;
		padding-top: 6%;

		overflow: hidden;
		text-overflow: ellispe;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;

	}

	.go3-3 {
		padding-top: 5%;
		color: #e9d82c;
		font-size: 14px;
	}

	.go3-4 {
		padding-top: 5%;
		width: 19%;
		text-align: right;
	}

	.go3-5 {
		text-align: right;
	}

	.go3-6 {
		padding-right: 2%;
	}

	.go4 {
		width: 100%;
		display: flex;
		margin-top: 3%;
		text-align: center;
	}

	.go4-1 {
		width: 5%;
		margin: 0 auto;
		padding: 2%;
	}

	.go4-2 {
		width: 20%;
		height: 20px;
		border: 1px solid #d4d4d4;
		border-radius: 20px;
		color: #d4d4d4;
		margin: 0 auto;
		padding: 2%;
	}

	.go4-3 {
		width: 20%;
		height: 20px;
		border: 1px solid #d4d4d4;
		color: #d4d4d4;
		border-radius: 20px;
		margin: 0 auto;
		padding: 2%;
	}

	.go4-4 {
		width: 20%;
		height: 20px;
		border: 1px solid orange;
		color: orange;
		font-size: 18px;
		border-radius: 20px;
		margin: 0 auto;
		padding: 2%;
	}
</style>